<!--
  Copy and paste this HTML to app.xml when you need help to define postion,
  scale or size of new image/text overlays.
-->

<div id='fullUI'>
	<input id="loadableURI" type="text" 
	       placeholder="Enter an image URL that ends in .png"
	       style="width:300px;"
	       />
  <input class="button" type="button" value="Display Image" id="topHatButton"
         onClick="drawImageOverlayTest(document.querySelector('#loadableURI').value);"/>
</div>
<div id="overlayControls">
  <br><br>
	<input id="scale-input" type="text" style="width:100px;" />
	<input class="button" type="button" value="Scale" 
         onClick="onSetScale(document.querySelector('#scale-input').value)"/>
  <br><br>
	<input id="xoffset-input" type="text" style="width:100px;" />
	<input class="button" type="button" value="X Offset" 
         onClick="onSetOffsetX(document.querySelector('#xoffset-input').value)"/>
  <br><br>
	<input id="yoffset-input" type="text" style="width:100px;" />
	<input class="button" type="button" value="Y Offset" 
         onClick="onSetOffsetY(document.querySelector('#yoffset-input').value)"/>
</div>

<br><br>
<div id='arbitraryURILoader'>
  Format: text, fontSize, color, bold, shadow, align, xPos, yPos [, c]<br>
	<input id="textFormat" type="text" 
	       placeholder="Enter an image URL that ends in .png"
	       style="width:300px;"
	       />
	<input class="button"
	       type="button" 
	       value="Show Text" id="animatedButton"
               onClick="drawTextOverlayTest(document.querySelector('#textFormat').value)"/>
</div>
<script src="https://table-tennis-scoreboard.googlecode.com/git/js/find_overlay_setup.js">
</script>

